<template>
  <div>
    <SideNavbar/>
    <div class="side-nav-padding"></div>
    <div class="app-right-container">
      <div ref="rightBox" class="app-right">
        <Topbar isShowSearch="false"></Topbar>
        <div class="common-page">
          <TopLoading :isLoading="loading"></TopLoading>
          <div :style="{width:$store.getters.contentWidth+'px'}" class="container">
            <section class="filter-container">
              <div class="filterleft" :class="{'expand':expandFilter}">
                <SelectPiece name="类型" :options="types" @change="typeChange"></SelectPiece>
                <SelectPiece name="地区" :options="regions" @change="regionChange"></SelectPiece>
              </div>
              <div class="filterright">
                <span
                  @click="expandFilter=!expandFilter"
                  :class="{'active':expandFilter}"
                  class="expand-filter"
                >
                  <span v-show="expandFilter">收起选项</span>
                  <span v-show="!expandFilter">展开选项</span>
                  <i class="material-icons">expand_more</i>
                </span>
              </div>
            </section>

            <div class="devider"></div>
            <section class="top-bar">
              <!-- <div class="left">
          <span class="piece active">最新</span>
          <span class="piece">最热</span>
          <span class="piece">好评</span>
              </div>-->
              <div class="left" v-show="!key" style="margin-left:20px">
                共
                <span class="number">{{totalItems}}</span>
                条筛选结果 {{currentPage}}/{{perPage}}
              </div>
              <div class="right" v-show="key">
                共找到关于"{{key}}"的{{$navbarItems[cate]}}
                <span class="number">{{totalItems}}</span>
                条搜索结果 {{currentPage}}/{{perPage}}
              </div>
            </section>
            <section class="videos-container">
              <VideoCard :video-info="video" v-for="(video,index) in videos" :key="index"></VideoCard>
            </section>
            <!-- <van-pagination v-model="currentPage" :total-items="202" :items-per-page="6" :show-page-size="20"/> -->
          </div>

          <div
            :style="{width:$store.state.appRightWidth+'px'}"
            class="loading-container active"
            v-show="isLoad"
          >
            <span>
              <span class="loading-icon">
                <i class="material-icons fa-spin">data_usage</i>
              </span>加载中...
            </span>
          </div>

          <div
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="10"
          ></div>
          <div style="text-align:center;padding:10px;" v-show="isShowNoMore">没有更多数据了...</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoCard from '@/pc/components/VideoCard/Index';
import SelectPiece from '@/pc/components/SelectPiece/Index';
import TopLoading from '@/pc/components/TopLoading/Index';
import VideoModel from '@/vendor/video';
import SideNavbar from '@/pc/components/SideNavBar/Index';
import Topbar from '@/pc/components/TopBar/Index';
import { throttle } from '@/pc/common/utils';
import infiniteScroll from 'vue-infinite-scroll';
import Vue from 'vue';
import { setTimeout } from 'timers';
Vue.use(infiniteScroll);

export default {
  name: 'CommonPage',
  data() {
    return {
      msg: 'common page',
      expandFilter: true,
      loading: false,
      types: [],
      regions: [],
      videos: [],
      totalItems: 0,
      currentPage: 1,
      perPage: 35,
      type: '全部',
      area: '全部',
      key: '',
      cate: 1,
      busy: true,
      loadMoreOption: 1,
      isShowNoMore: false,
      navbarItems: null,
      isLoad: false
    };
  },
  mounted() {
    var self = this;
    var getAppRightWidth = function() {
      var width = self.$refs.rightBox.offsetWidth;
      self.$store.commit('updateAppRightWidth', Number.parseInt(width, 10));
    };
    window.addEventListener('resize', throttle(getAppRightWidth, 300));
    getAppRightWidth();

    try {
      this.init();
    } catch (e) {
      location.reload();
    }
  },
  beforeRouteUpdate(to, from, next) {
    next();
    try {
      this.init();
    } catch (e) {
      location.reload();
    }
  },
  methods: {
    init: function() {
      this.type = '全部';
      this.area = '全部';
      this.currentPage = 1;
      this.busy = true;
      this.videos = [];
      this.navbarItems = this.$navbarItems;
      this.key = this.$route.params.key.trim();
      this.cate = this.$route.params.cate;
      this.types = this.$VIDEO[this.cate]['tag_type'];
      this.regions = this.$VIDEO[this.cate]['tag_area'];
      this.videoModel = new VideoModel();
      if (this.key) {
        this.loading = true;
        this.initDb(this.cate, 'video').then(() => {
          this.initDb(this.cate, 'video_star').then(() => {
            this.videoModel
              .getTotalItemsByKey(this.cate, this.key)
              .then(totalItems => {
                this.totalItems = totalItems;
                this.loading = false;
                if (totalItems === 0) {
                  this.videos = [];
                  return;
                }
                this.getPageByKey();
              });
          });
        });
      } else {
        this.loading = true;
        this.initDb(this.cate, 'video').then(() => {
          this.videoModel.getTotalItems(this.cate).then(totalItems => {
            this.totalItems = totalItems;
            this.getPage();
            this.loading = false;
          });
        });
      }
    },
    typeChange: function(value, index) {
      this.key = '';
      this.type = value;
      if (this.type == '全部' && this.area == '全部') {
        this.getPage();
        return;
      }
      this.initDb(this.cate, 'video_msg').then(() => {
        let type = this.type == '全部' ? '' : this.type;
        let area = this.area == '全部' ? '' : this.area;
        this.videoModel
          .getTotalItemsByLabel(this.cate, type, area)
          .then(totalItems => {
            this.totalItems = totalItems;
            this.getPageByLable(type, area);
          });
      });
    },
    regionChange: function(value, index) {
      this.key = '';
      this.area = value;
      if (this.type == '全部' && this.area == '全部') {
        this.videoModel.getTotalItems(this.cate).then(totalItems => {
          this.totalItems = totalItems;
          this.getPage();
        });
        return;
      }
      this.initDb(this.cate, 'video_msg').then(() => {
        let type = this.type == '全部' ? '' : this.type;
        let area = this.area == '全部' ? '' : this.area;
        this.videoModel
          .getTotalItemsByLabel(this.cate, type, area)
          .then(totalItems => {
            this.totalItems = totalItems;
            this.getPageByLable(type, area);
          });
      });
    },
    getPage() {
      this.loadMoreOption = 1;
      this.isShowNoMore = false;
      this.loading = true;
      this.currentPage = 1;
      this.videoModel.getPage(this.cate, this.currentPage, this.perPage).then(
        datalist => {
          this.loading = false;
          this.videos = datalist;
          this.busy = false;
        },
        err => {
          this.loading = false;
          this.busy = false;
        }
      );
    },
    getPageByKey() {
      this.loadMoreOption = 2;
      this.isShowNoMore = false;
      this.loading = true;
      this.currentPage = 1;
      this.videoModel
        .getPageByKey(this.cate, this.key, this.currentPage, this.perPage)
        .then(
          datalist => {
            this.loading = false;
            this.videos = datalist;
            this.busy = false;
          },
          err => {
            this.loading = false;
            this.busy = false;
          }
        );
    },
    getPageByLable(type, area) {
      this.loadMoreOption = 3;
      this.isShowNoMore = false;
      this.loading = true;
      this.currentPage = 1;
      this.videoModel
        .getPageByLable(this.cate, type, area, this.currentPage, this.perPage)
        .then(
          datalist => {
            this.loading = false;
            this.videos = datalist;
            this.busy = false;
          },
          err => {
            this.loading = false;
            this.busy = false;
          }
        );
    },
    loadMore: function() {
      if (!this.busy) {
        this.busy = true;
        this.isLoad = true;
        let pageNum = Math.ceil(this.totalItems / this.perPage);
        if (this.currentPage >= pageNum) {
          if (this.currentPage >= 2) this.isShowNoMore = true;
          this.isLoad = false;
          return;
        }
        this.currentPage++;
        if (this.loadMoreOption == 1) {
          this.videoModel
            .getPage(this.cate, this.currentPage, this.perPage)
            .then(
              datalist => {
                this.videos = this.videos.concat(datalist);
                setTimeout(() => {
                  this.busy = false;
                  this.isLoad = false;
                }, 600);
              },
              err => {
                this.busy = false;
                this.isLoad = false;
              }
            );
        } else if (this.loadMoreOption == 2) {
          this.videoModel
            .getPageByKey(this.cate, this.key, this.currentPage, this.perPage)
            .then(
              datalist => {
                this.videos = this.videos.concat(datalist);
                setTimeout(() => {
                  this.busy = false;
                  this.isLoad = false;
                }, 600);
              },
              err => {
                this.busy = false;
                this.isLoad = false;
              }
            );
        } else if (this.loadMoreOption == 3) {
          let type = this.type == '全部' ? '' : this.type;
          let area = this.area == '全部' ? '' : this.area;
          this.videoModel
            .getPageByLable(
              this.cate,
              type,
              area,
              this.currentPage,
              this.perPage
            )
            .then(
              datalist => {
                this.videos = this.videos.concat(datalist);
                setTimeout(() => {
                  this.busy = false;
                  this.isLoad = false;
                }, 600);
              },
              err => {
                this.busy = false;
                this.isLoad = false;
              }
            );
        }
      }
    }
  },
  components: {
    TopLoading,
    VideoCard,
    SelectPiece,
    SideNavbar,
    Topbar
    // [Pagination.name]: Pagination
  }
};
</script>
<style  src="./Index.scss" lang="scss"></style>
